#include("../common/_layout.html")
#include("../common/_navbar.html")
#@layout()

#define content()
	#@navbar("news")
	<div class="container">
		<h1>公告</h1>
		#for(news : list)
		<button class="btn btn-default btn-lg btn-block newsBtn" id="#(news.id)">
			<span class="newsTitle">#(news.title)</span>
			<span class="newsDate">#date(news.createTime)</span>
		</button>
		#end
	</div>
	<div class="modal fade" id="newsDetail" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
            	<div class="modal-header">
	                <div class="modal-title"><h1>{{ title }}</h1><div>{{ date }}</div></div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            </div>
	            <div class="modal-body" v-html="content">
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	            </div>
	        </div>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#newsDetail',
		  data: {
			  title: '',
			  date: '',
			  content: '',
		  }
		});
		$(".newsBtn").click(function(){
			var id = $(this).attr("id");
			$.post("#(homeurl ??)/news/getNewsDetail",{id:id},function(data){
				if(data!=null){
					app.title = data.title;
					app.date = data.create_time;
					app.content = data.content;
		    		$('#newsDetail').modal('show');
				}
			});
		});
	</script>
#end

#define css()
<style type="text/css">
.newsTitle {
	float:left;
}
.newsDate {
	float:right;
}
</style>
#end